<div>
  <form [formGroup]="form" (ngSubmit)="queryEmployee()">
    <mat-form-field>
      <input matInput placeholder="請輸入員工名稱" autocomplete="off" formControlName="name">
    </mat-form-field>
    <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">查詢</button>
  </form>
</div>
<mat-divider></mat-divider>
<table *ngIf='tableVisible' mat-table [dataSource]="dataSource" class="table table-sm table-hover">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名稱 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> 年齡 </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<div>
  <h3>call procedure test</h3>
  後臺使用monngodb時無
</div>

<div>
  <form [formGroup]="spform" (ngSubmit)="queryEmployeeBySp()">
    <mat-form-field>
      <input matInput placeholder="請輸入員工性別" autocomplete="off" formControlName="empsex">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="請輸入員工最小年齡" autocomplete="off" formControlName="empage">
    </mat-form-field>
    <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">查詢</button>
  </form>
</div>
<mat-divider></mat-divider>
<table *ngIf='sptableVisible' mat-table [dataSource]="spDataSource" class="table table-sm table-hover">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名稱 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> 年齡 </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>